<template>
  <div class="order-list">
    <!-- 导航 -->
    <van-nav-bar title="我的订单" class="myOrder">
      <i
        class="icon-home iconfont f18"
        slot="left"
        @click="$router.push('/')"
      ></i>
    </van-nav-bar>
    <!-- 标签栏 -->
    <van-sticky>
      <van-tabs v-model="active">
        <van-tab title="全部" name="-1"></van-tab>
        <van-tab title="待付款" name="02"></van-tab>
        <van-tab title="待发货" name="01"></van-tab>
        <van-tab title="已取消" name="00"></van-tab>
      </van-tabs>
    </van-sticky>
    <!-- 商品详情 -->
    <div class="list">
      <div class="item">
        <div  class="card pl-15 pr-15 pb-15"   v-for="item in orderList" :key="item.orderId">
          <div class="flex jc-sb aic" style="height: 100px" v-if="item.carts.length===1">
            <p class="img-box">
              <img :src="item.carts[0].imgUrl" alt=""  class="img" />
            </p>
            <div class="desc flex2 jc-sb fg1" style="height: 68px">
              <p class="f14 lh15" style="width: 200px">{{item.carts[0].masterName}}</p>
              <p class="flex jc-sb">
                <span class="flex aic"
                  ><span class="f10">￥</span><span>{{item.carts[0].price | fMoney}}</span></span
                ><span class="f999 f14">x 1</span>
              </p>
            </div>
          </div>
          <div class="flex jc-sb aic" style="height: 100px" v-else>
            <template v-for="(cart,index) in item.carts">
              <p  class="img-box flex fdc"   :key="cart.cartId" v-if="index<4"> 
              <img :src="cart.imgUrl" alt="" class="img" />
               </p>
            </template>
            <i class="van-icon van-icon-arrow"  style="color: rgb(153, 153, 153)" ></i>
          </div>
          
          <div slot="footer" class="border-line" style="height: 40px">
            <p class="flex jc-e aic" style="line-height: 40px">
              <span class="mr-10 f14">共{{ item.carts.length }}件商品</span
              ><span class="f14">
                实付
                <span class="red">￥{{ item.totalMoney | fMoney }}</span></span
              >
            </p>
          </div>
          <div
            class="margin-top flex jc-sb aic"
            v-if="item.orderStatus === '00'"
          >
            <span class="flr">订单状态: 已取消</span
            ><button
              class="buttosize van-button van-button--default van-button--small"
            >
              <div class="van-button__content">
                <span class="van-button__text">重新购买</span>
              </div>
            </button>
          </div>
          <div
            class="margin-top flex jc-sb aic"
            v-if="item.orderStatus === '01'"
          >
            <span class="flr">订单状态: 已支付</span
            ><button
              class="buttosize van-button van-button--default van-button--small"
            >
              <div class="van-button__content">
                <span class="van-button__text">再次购买</span>
              </div>
            </button>
          </div>
          <div
            class="margin-top flex jc-sb aic"
            v-if="item.orderStatus === '02'"
          >
            <span class="flr"
              >订单状态:
              <van-count-down :time="time" format="mm 分 ss 秒" /></span
            ><button
              class="buttosize van-button van-button--default van-button--small"
            >
              <div class="van-button__content">
                <span class="van-button__text">去支付</span>
              </div>
            </button>
          </div>
        </div>
        <div style="background: rgb(244, 244, 244); height: 10px"></div>
      </div>
    </div>
  </div>
</template>

<script>
import $http from "@/utils/request.js";
export default {
  data() {
    return {
      orderList: [],
      allList: [],
      active: -1,
    };
  },
  created() {
    this.getOrderList();
  },
  computed: {
    time() {
      let allTime = 15 * 60 * 1000;
      let passTime = Date.now() - this.orderList[0].createTime;
      let time = allTime - passTime;
      return time;
    },
  },
  watch: {
    active(activeIndex) {
      if (activeIndex === "-1") {
        this.orderList = this.allList;
      } else {
        this.orderList = this.allList.filter((item) => {
          return item.orderStatus === activeIndex;
        });
      }
    },
  },
  methods: {
    getOrderList() {
      $http.get("/order/all").then((res) => {
        this.orderList = res.list;
        this.allList = res.list;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.order-list {
  min-height: 100vh;
  background: #fff;
  .padd-15 {
    padding: 25px;
  }
  .border-line {
    line-height: 40px;
    height: 40px;
    border-bottom: 1px solid rgb(236, 233, 233);
    border-top: 1px solid rgb(236, 233, 233);
  }
  // padding-bottom: 10px;

  .van-nav-bar .van-icon {
    color: #2e2f30;
    font-size: 22px;
  }

  .navagator {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 9;
  }

  .img-box {
    img {
      background: rgb(249, 249, 249);
      height: 70px;
      width: 70px;
      margin-right: 10px;
    }
  }

  .van-card__thumb {
    width: 70px;
    height: 70px;
  }

  .van-image__error,
  .van-image__img,
  .van-image__loading {
    //  display: block;
    width: 70px;
    height: 70px;
  }

  .van-card__content {
    height: 70px;
  }

  .van-card__header {
    min-height: 70px;
  }

  .van-card__bottom {
    line-height: 20px;
    margin-top: 32px;
  }

  .van-card {
    background: white;
  }

  .flr {
    float: left;
    line-height: 33px;
    color: #bdc0c5;
  }

  .buttosize {
    width: 86px;
    height: 33px;
    font-size: 11px;
    border: 1px solid #2e2f30;
    box-sizing: border-box;
  }

  .margin-top {
    margin-top: 8px;
  }
}
</style>
